<template>
<!-- 优惠券说明 -->
    <div class="Lo_vo_ins">
        <header class="Lo_voucher02_header">
            <!-- 返回跳转 -->

            <p @click='Lo_vo_ins_back' class="Lo_vo_ins_back"><img src="../../../static/imgs/return.png"/></p>
            <p>代金券使用说明</p>
            <p></p>
        </header>
        <main class="Lo_voucher02_main">
            <section class="Lo_voucher02_section1">
            <dl>
                <p>1.什么是代金券</p>
                <p>
                代金券是【本客户端】发行和认可的购买服务抵现券，可以在【本客户端】购买服务付款时抵扣相应面值的金额
                </p>
            </dl>
            </section>
            <section class="Lo_voucher02_section2">
            <dl>
                <p>2.如何获取代金券？</p>
                <p>
                每次购买完相应的服务，都会获得一定面值的代金券，同时系统也会在特殊的事件发放随机面额的代金券
                </p>
            </dl>
            </section>
            <section class="Lo_voucher02_section3">
            <dl>
                <p>3.如何使用代金券？</p>
                <p>在【本客户端】购买服务付款时，可以选择使用一张代金券，抵扣相应的金额。</p>
            </dl>
            </section>
            <section class="Lo_voucher02_section4">
            <dl>
                <p>4.代金券找零兑现？</p>
                <p>代金券不找零，不兑现。付款时抵用券会被优先使用，不足支付时才会使用账户余额。</p>
            </dl>
            </section>
        </main>  
    </div>
</template>
<script>
    export default {
        name:'Lo_vo_ins',
        methods:{
            Lo_vo_ins_back:function(){
                this.$router.go(-1)
            }
        }
    }
</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}

.Lo_voucher02_header{
    .PxToRem(height,88);
    .PxToRem(font-size,35);
    .Flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    padding-left: 2%;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    p:nth-child(1){
        img{
            .PxToRem(width,55);
            .PxToRem(height,53);
        }
    }
}
.Lo_voucher02_main{
   .PxToRem(padding-top,88);
   padding-left: 6%;
   padding-right: 6%;
}
.Lo_voucher02_section1{
    dl{
      p:nth-child(1){
        .PxToRem(font-size,24);
        .PxToRem(padding-top,40);
        .PxToRem(padding-bottom,15);
      }
      p:nth-child(2){
        width: 95%;
        .PxToRem(height,100);
        .PxToRem(font-size,22);
        .PxToRem(line-height,40);
        .PxToRem(padding-top,25);
        .PxToRem(padding-left,25);
        border: 1px solid #d7d7d7;
      }
    }
}
.Lo_voucher02_section2{
    dl{
      p:nth-child(1){
        .PxToRem(font-size,24);
        .PxToRem(padding-top,40);
        .PxToRem(padding-bottom,15);
      }
      p:nth-child(2){
        width: 95%;
        .PxToRem(height,100);
        .PxToRem(font-size,22);
        .PxToRem(line-height,40);
        .PxToRem(padding-top,25);
        .PxToRem(padding-left,25);
        border: 1px solid #d7d7d7;
      }
    }
}
    .Lo_voucher02_section3{
    dl{
      p:nth-child(1){
        .PxToRem(font-size,24);
        .PxToRem(padding-top,40);
        .PxToRem(padding-bottom,15);
      }
      p:nth-child(2){
        width: 95%;
        .PxToRem(height,100);
        .PxToRem(font-size,22);
        .PxToRem(line-height,40);
        .PxToRem(padding-top,25);
        .PxToRem(padding-left,25);
        border: 1px solid #d7d7d7;
      }
    }
}
    .Lo_voucher02_section4{
    dl{
      p:nth-child(1){
        .PxToRem(font-size,24);
        .PxToRem(padding-top,40);
        .PxToRem(padding-bottom,15);
      }
      p:nth-child(2){
        width: 95%;
        .PxToRem(height,100);
        .PxToRem(font-size,22);
        .PxToRem(line-height,40);
        .PxToRem(padding-top,25);
        .PxToRem(padding-left,25);
        border: 1px solid #d7d7d7;
      }
    }
}


</style>





